<template>
    <el-dialog :visible.sync="visible" title="提交出库审核" :close-on-click-modal="false" :close-on-press-escape="false">
        <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()"
            :label-width="$i18n.locale === 'en-US' ? '120px' : '80px'">
            <el-form-item label="出库数量" prop="outQuantity">
                <el-input v-model="dataForm.outQuantity" placeholder="出库数量"></el-input>
            </el-form-item>
            <el-form-item label="出库描述" prop="outDescription">
                <el-input type="textarea" v-model="dataForm.outDescription" placeholder="出库描述"></el-input>
            </el-form-item>
            <el-form-item label="出库图片" prop="outImgUrl">
                <el-upload class="avatar-uploader" :action="uploadUrl" :headers="headers" :show-file-list="false"
                    :on-success="handleAvatarSuccess">
                    <img v-if="dataForm.outImgUrl" :src="dataForm.outImgUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
        </el-form>
        <template slot="footer">
            <el-button @click="visible = false">{{ $t("cancel") }}</el-button>
            <el-button type="primary" @click="dataFormSubmitHandle()">{{
        $t("confirm")
                }}</el-button>
        </template>
    </el-dialog>
</template>

<script>
import Cookies from 'js-cookie'
import debounce from "lodash/debounce";
export default {
    data() {
        return {
            uploadUrl: window.SITE_CONFIG['apiURL'] + '/piclocal/upload/pic',
            headers: { token: Cookies.get('token') },
            visible: false,
            dataForm: {
                productId: "",
                outQuantity: "",
                outDescription: "",
                status: 0,
                outImgUrl: ""
            },
        };
    },
    computed: {
        dataRule() {
            return {
                title: [
                    {
                        required: true,
                        message: this.$t("validate.required"),
                        trigger: "blur",
                    },
                ],
                description: [
                    {
                        required: true,
                        message: this.$t("validate.required"),
                        trigger: "blur",
                    },
                ],
                imgUrl: [
                    {
                        required: true,
                        message: this.$t("validate.required"),
                        trigger: "blur",
                    },
                ],
                price: [
                    {
                        required: true,
                        message: this.$t("validate.required"),
                        trigger: "blur",
                    },
                ],
                updater: [
                    {
                        required: true,
                        message: this.$t("validate.required"),
                        trigger: "blur",
                    },
                ],
                updateDate: [
                    {
                        required: true,
                        message: this.$t("validate.required"),
                        trigger: "blur",
                    },
                ],
            };
        },
    },
    methods: {
        init() {
            this.visible = true;
            this.$nextTick(() => {
                this.$refs["dataForm"].resetFields();
            });
        },
        handleAvatarSuccess(res, file) {
            console.log(res)
            console.log(file)
            this.dataForm.outImgUrl = res.data.imgAddress;
        },
        // 表单提交
        dataFormSubmitHandle: debounce(function () {
            this.$refs['dataForm'].validate((valid) => {
                if (!valid) {
                    return false
                }
                this.$http[!this.dataForm.id ? 'post' : 'put']('/humanResources/outbound/', this.dataForm).then(({ data: res }) => {
                    if (res.code !== 0) {
                        return this.$message.error(res.msg)
                    }
                    this.$message({
                        message: this.$t('prompt.success'),
                        type: 'success',
                        duration: 500,
                        onClose: () => {
                            this.visible = false
                            this.$emit('refreshDataList')
                        }
                    })
                }).catch(() => { })
            })
        }, 1000, { 'leading': true, 'trailing': false })
    },
};
</script>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>